<template>
  <el-card>
    <div class="flex align-center mb-[20px]">
      <el-icon size="22" class="mr-[10px]"><Timer /></el-icon>
      <el-text size="large" class="font-bold">审核进度查询</el-text>
    </div>

    <el-descriptions :column="1" class="mb-[20px]">
      <el-descriptions-item label="企业名称:" label-align="right"
        >乐付科技有限公司</el-descriptions-item
      >
      <el-descriptions-item label="申请编号:" label-align="right"
        >AP20230615000123</el-descriptions-item
      >
      <el-descriptions-item label="提交时间:" label-align="right"
        >2023-06-15 14:30:22</el-descriptions-item
      >
    </el-descriptions>

    <el-timeline style="max-width: 600px">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :hollow="activity.hollow"
        :timestamp="activity.timestamp"
      >
        <div class="flex flex-col">
          <div size="large" class="font-bold self-start">
            {{ activity.content }}
          </div>
          <p class="items-start py-[10px]">{{ activity.sub }}</p>
          <el-progress
            v-if="activity.percentage"
            :percentage="activity.percentage"
          />
          <el-button
            v-if="activity.button"
            :type="activity.type"
            class="w-[100px]"
            @click="supplement"
          >
            {{ activity.button }}
          </el-button>
        </div>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>

<script lang="ts" setup>
import { MoreFilled, Timer } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import type { TimelineItemProps } from "element-plus";

interface ActivityType extends Partial<TimelineItemProps> {
  content: string;
}
const router = useRouter();
const activities: ActivityType[] = [
  {
    content: "资料提交成功",
    sub: "您的申请资料已成功提交，等待审核",
    timestamp: "2018-04-12 20:46",
    size: "large",
    type: "primary",
    icon: MoreFilled
  },
  {
    content: "初审中",
    sub: "审核人员正在进行初步审核，请耐心等待",
    timestamp: "2018-04-03 20:46",
    color: "#0bbd87"
  },
  {
    content: "初审待补件",
    sub: "您的申请需要补充材料，请尽快上传",
    button: "立即上传",
    type: "primary",
    timestamp: "2018-04-03 20:46",
    size: "large"
  },
  {
    content: "初审通过",
    sub: "资料初步审核通过，进入终审阶段",
    type: "primary",
    hollow: true
  },
  {
    content: "终审中",
    sub: "审核人员正在进行最终审核，请耐心等待",
    percentage: 60,
    timestamp: "2018-04-03 20:46"
  }
];

const supplement = () => {
  router.push("/application/supplement");
};
</script>
